<!--
 * @Author: [kangjie]
 * @Date: 2022-03-30 10:49:39
 * @LastEditors: [kangjie]
 * @LastEditTime: 2022-04-01 10:32:40
 * @Description: 
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>动态的切换组件</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

</head>

<body>
  <div id="app">
    <!-- 静态的is是注册组件的名称 -->
    <button @click="current='my-a'">A组件</button>
    <button @click="current='my-b'">B组件</button>
    <button @click="current='my-c'">C组件</button>
    <!-- <component is="my-c"></component> -->
    <!-- 默认情况下,组件切换的时候会重新创建组件,但是有些时候我们希望组件实例
      可以在第一次创建的时候缓存下来 就可以使用keep-alive标签包裹动态组件
    
    -->
    <keep-alive>
      <component :is="current"></component>
    </keep-alive>

  </div>

  <script>
    let myA = {
      template: `
      <div>A组件的内容</div>
    `,
      created() {
        console.log('A组件created')
      }
    };
    let myB = {
      template: `
      <div> B组件的内容</div>
    `,
      created() {
        console.log('B组件created')
      }
    };
    let myC = {

      template: `
      <div>C组件的内容</div>
    `,
      created() {
        console.log('C组件created')
      }
    };
    Vue.component('my-a', myA);
    Vue.component('my-b', myB);
    Vue.component('my-c', myC);
    new Vue({
      el: '#app',
      data: {
        // 存放组件名称的变量
        current: 'my-a'
      },
      methods: {

      }
    })
  </script>
</body>

</html>